﻿<template>
    <div id="app">
        <mt-header v-bind:title="title" style="background-color:#fda10e">
            <a slot="left" @click="back()">返回</a>
            <mt-button slot="right" @click="rightclick()">{{righttext}}</mt-button>
        </mt-header>


        <div class="mui-card">


            <Row>
                <Col span="24">
                <img v-if="info.imgurl==''" src="../assets/images/pic_food.png" width="100%" />
                <img v-else :src="info.imgurl" width="100%" />
                </Col>
            </Row>
            <Row style="padding-left:10px;">
                <Col span="24">
                <p>{{info.title}} 【{{info.type}}】 </p>
                <p>
                    <rate disabled v-model="info.star" />
                </p>
                </Col>

            </Row>

            <Row style="padding-left:10px;">
                <Col span="24">
                {{info.desc}}
                </Col>
            </Row>
            <Row style="padding-left:10px;">
                <Col span="24">
                我的评分:{{info.mystar}}
                </Col>
            </Row>


        </div>
        <mt-popup v-model="popupVisible" style="width:100%;"
                  position="bottom">
            <mt-picker :slots="slots" @change="onValuesChange" v-if="visible"></mt-picker>
        </mt-popup>


    </div>
</template>

<script>
    import Bus from '../bus.js';
    import { Toast } from 'mint-ui';
    import { fail } from 'assert';
    export default {
        name: 'app',
        data() {
            return {
                title: "食谱",
                info: {},
                righttext: "打分",
                visible: false,
                star: 0,
                slots: [

                    {
                        flex: 1,
                        values: ['请选择', '1', '2', '3', '4', '5'],
                        className: 'slot1',
                        textAlign: 'center'
                    }


                ],
                popupVisible: false
            }
        },
        mounted() {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);

            window.onpopstate = () => {
                Bus.$emit('val', "show");
                this.$router.back();
            }
        },
        methods:
        {
            onValuesChange: function (picker, value) {
                var _this = this;
                if (value != "请选择") {
                    this.$data.info.mystar = value[0];
                    this.$data.visible = false;
                    this.$data.popupVisible = false;


                    var star = value[0];
                    var userid = window.localStorage.getItem("userid");
                    var foodid = this.$route.params.id;

                    this.$api.post('wx/Index/foodstar', {
                        "foodid": foodid,
                        "userid": userid,
                        "star": star
                    }, response => {
                        if (response.status >= 200 && response.status < 300) {
                            console.log(response.data);
                            var data = response.data;
                            if (data.status == 200) {
                                _this.info.star = data.data;
                            }

                            //请求成功，response为成功信息参数
                        } else {
                            console.log(response.message);
                            //请求失败，response为失败信息
                        }
                    });
                }
            },
            load: function () {
                var id = this.$route.params.id;
                var userid = window.localStorage.getItem("userid");
                console.log(this.$route.params);
                var _this = this;
                this.$api.post('wx/Index/getfoodinfo', {
                    "id": id,
                    "userid": userid
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);
                        var data = response.data;
                        if (data.status == 200) {
                            _this.$data.info = data.data;
                        }

                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            rightclick: function () {
                this.$data.popupVisible = true;
                this.$data.visible = true;

            },
            back: function () {

                this.$router.back();
            }

        },
        created: function () {
            this.load();

        }
    }
</script>

<style scoped>
</style>